<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
	<link rel="stylesheet" href="static/font/css/font-awesome.min.css"><!-- 图标库 -->
</head>
<body>
	<style type="text/css">
		body{
			margin: 0;
		}
		.head{
			width: 100%;
			margin: 0 auto;
		}
		.header{
			width: 800px;
			margin: 0 auto; 
			margin-top: 10px;
		}
		.logo{
			float:left;
			width: 90px;
			height: 100px;
			margin-left: 29%;
			margin-top: -29px;	
		}
		.main{
			width:288px;
			height:100px;
			margin-left:11px;
			text-align:left;
			margin-left: 33%;
		}
		.main_font{
			background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
			-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
			-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */ 
			-webkit-background-size: 200% 100%; 
			-webkit-animation: masked-animation 4s linear infinite; 
			font-size: 35px;
			font-family: 楷体;
			text-shadow:5px 10px 6px #000;
		}
		.main_p{
			color: #bfa699;
		}
		
		/* 内容 */
		.container{
			width: 80%;
			height: 470px;
			margin: 0 auto;
		}
		.img{
			float: right;
		}
		.img>.img_img{
			width: 400px;
			height: 470px;
		}
		
		.content{
			height: 98%;
			width: 66%;
		}
		.content_admin{
			width: 100%;
			height: 30%;
		}
		.content_book{
			width: 100%;
			height: 30%;
		}
		.content_user{
			width: 100%;
			height: 30%;
		}
		.content div p{
			font-size:1.3em;
			color:#ec9114;
			text-transform:capitalize;
			font-weight:600;
			letter-spacing:5px;
		}
		.content div span{
			color:#777;
			line-height:2em;
			font-family:'Open Sans', sans-serif;
			font-size:14px;
		}
	</style>
<div class="head">
	<div class="header">
		<div class="logo"><img alt="" src="static/img/logo.png" width="90px" height="100px"></div>
		<div class="main">
			<font class="main_font">图书管理系统</font>
			<p class="main_p">Books Management System (BMS)</p>
		</div>
	</div>
	<div class="container">
		<div class="img">
			<img class="img_img" alt="" src="static/img/book.png" >
		</div>
		<div class="content">
			<div class="content_admin">
				<p><i class="fa fa-tv"></i>系统管理员</p>
				<span>
					借书审核、还书审核、图书管理、用户管理（增删改查+权限管理）、查看借还书记录、修改密码！<br>
					系统管理员没有借书功能，但是能管理和监查用户对图书的使用情况。其中可以对用户权限进行管理，用户可以升级为图书管理员对图书进行管理，也可以对图书管理员降级为用户！
				</span>
			</div >
			<div class="content_book">
				<p><i class="fa fa-tv"></i>图书管理员</p>
				<span>
					借书审核、还书审核、图书管理、查看用户、查看借还书记录、修改密码、借书、还书、查看个人借书记录！<br>
					图书管理员借书还书不需要审核，只能查看用户信息，不能修改用户信息！
				</span>
			</div>
			<div class="content_user">
				<p><i class="fa fa-tv"></i>借阅者</p>
				<span>
					借书、还书、查看个人借书记录、修改密码！<br><br>
				</span>
				<p><i class="fa fa-internet-explorer" ></i>预测测试账号：</p>
				<span>
					图书管理员：<i class="fa fa-user-circle-o" >&nbsp;123</i>
					<i class="fa fa-lock" style="margin-right: 30px;">&nbsp;123</i>
					借阅者：<i class="fa fa-user-circle-o" >&nbsp;111</i>
					<i class="fa fa-lock">&nbsp;111</i>
				</span>
			</div>
		</div>
	</div>
</div>
</body>
</html>